<template>
  <div class="m-header">
    <header class="page-all clearfix">
      <div class="logo fl">
        <a href="#">
          <img src="../../assets/images/logo1.png" alt="没得比平台" />
        </a>
      </div>
      <div class="search fl">
        <form action="post">
          <i class="el-icon-search"></i>
          <input type="text" name="search" id="keyword" placeholder="搜一下看看~~" />
          <button class="search-btn" id="search-btn">搜索</button>
        </form>
        <ul class="hot-search fl">
          <li>大家都在搜:</li>
          <li v-for="item in hotSearch" :key="item">{{ item }}</li>
        </ul>
      </div>
      <div class="coupon-channel fl">
        <a href="#">
          <img src="../../assets/images/quan.png" />
        </a>
      </div>
    </header>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hotSearch: ["T恤", "牛仔裤", "连衣裙"]
    };
  }
};
</script>
<style lang="less">
.m-header {
  position: relative;
  // background: url(../../../assets/images/20bg.png) top no-repeat;
  // height: 352px;
  padding: 22px 0 29px;
}
//伪元素设置背景图片
.m-header::before {
  height: 352px;
  width: 239px;
  content: "";
}
.search {
  // position: relative;
  margin: 2px 0 0 60px;
  border: 1px solid #d1d1d1;
  border-radius: 21px;
  width: 500px;
  height: 42px;
  font-size: 13px;
  color: #b5b5b5;
}
.search .el-icon-search {
  float: left;
  font-size: 20px;
  line-height: 42px;
  margin-left: 15px;
}
.search input {
  float: left;
  width: 74%;
  border: 0px;
  background: none;
  margin: 13px 10px 0px;
}
.search-btn {
  float: right;
  margin: 5px;
  border-radius: 20px;
  width: 60px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
  background: #f85e23;
  color: white;
}
.coupon-channel {
  margin-left: 40px;
}
.hot-search {
  margin-top: 20px;
}
.hot-search li {
  float: left;
  margin: 0 5px;
}
</style>
